
// separate this in three calsse MVC.
// make the view in a template file.

// class view has function for different type of display ( showLogged, showForm, showFormAndError ...) can transition since it is stateful
// class model manage the connexion with the server and the security protocol (MD5 the password ...)
// the controler maintain an FSM of the login system, contain and coordonne the 2 previous ones.

// better to use event or callback?

////////////////////////////////////////////////////////////////////////////////
var LoginBoxView = new Class({
  Implements: Events,
  initialize: function() {
    this.showForm();
  },
  //state: "",
  // display functions
  showLogged: function(username) {
    $('login-box').set('html', "Hello "+username+" <a class='logout'>logout</a>");
    $$('#login-box .logout').addEvent('click', function() {
      this.fireEvent('logout');
      return false;
    }.bind(this));
  },
  showForm: function() {
    $('login-box').set('html',
      '<form>Pseudo: <input type="text" name="username">'+
      'Password: <input type="password" name="password">'+
      '<input type="submit" value="login"></form>'
    );
    $$('#login-box form').addEvent('submit', function(e) {
      this.fireEvent('submit', [e.target.username.value,e.target.password.value]);
      return false;
    }.bind(this));
  },
  showConnectionInProgress: function() {
    $('login-box').set('html', "Connexion in progress...");
  },
  showFormAndError: function(error) {
    this.showForm();
    // append message
    //$('login-box').inject( );
  }
});
////////////////////////////////////////////////////////////////////////////////
// fixme: do not create new request each time
var LoginBoxModel = new Class({
  tryLogin: function(username, password, callback) {
    var login_request = new Request.JSON({
      url:"login.php",
      onSuccess: function(data) { callback(data.result,username); },
      onFailure: function() { callback(false,''); }
    }).post({'name':username, 'passwd':password});
  },
  isLogged: function(callback) {
    var islogged_request = new Request.JSON({
      url:"is_logged.php",
      onSuccess: function(data) { callback(data.result,data.name); },
      onFailure: function() { callback(false,''); }
    }).send();
  },
  logout: function(callback) {
    var islogged_request = new Request.JSON({
      url:"logout.php",
      onComplete: function() { this.isLogged(callback); }.bind(this),
    }).send();
  }
});
////////////////////////////////////////////////////////////////////////////////
var LoginBox = new Class({
  initialize: function() {
    this.bound = {
      submit_callback: this.submit_callback.bind(this),
      logout_callback: this.logout_callback.bind(this),
      rq_callback: this.rq_callback.bind(this)
    };
    this.view = new LoginBoxView;
    this.view.addEvent('submit', this.bound.submit_callback);
    this.view.addEvent('logout', this.bound.logout_callback);
    this.model = new LoginBoxModel;
    this.model.isLogged(this.bound.rq_callback);
  },
  submit_callback: function(name, passwd) {
    this.model.tryLogin(name,passwd,this.bound.rq_callback);
    this.view.showConnectionInProgress();
  },
  logout_callback: function() {
    this.model.logout(this.bound.rq_callback);
    this.view.showConnectionInProgress();
  },
  rq_callback: function(res, name) {
    if(res) {
      this.view.showLogged(name);
    } else {
      this.view.showForm();
    }
  }
});

